'use strict'

var data = {
    listItem: [
        {
            attributeId: '1',
            attributeName: "可调光",
            type: "radio",
            required: true, // 是否必填
            attributeValueList: [
                {
                    valueId: '11',
                    valueName: "是",
                    check: false
                },
                {
                    valueId: '12',
                    valueName: "否",
                    check: false
                }
            ]
        },
        {
            attributeId: '2',
            attributeName: "功率",
            type: "checkbox",
            required: true, // 是否必填
            attributeValueList: [
                {
                    valueId: '21',
                    valueName: "15w",
                    check: false
                },
                {
                    valueId: '22',
                    valueName: "9w",
                    check: false
                }
            ]
        }
    ]
}


new Vue({
    el: '#demo',
    data: data,
    methods: {
        onBlur: onBlur,
        onChange: onChange
    },
    ready: function () {
        var preList = getLastData();
        if (preList && preList.length > 0) {
            this.listItem = preList;
        }
        updateData(this.listItem);
    }
});

function onChange(e) {
    var targetID = e.target.getAttribute('id');
    var checked = e.target.checked;
    var type = e.target.getAttribute('type');
    console.log(targetID + '_' + checked + '_' + type);
    var listItem = this.listItem;
    updateCheckbox(type, targetID, checked, listItem)
}

function onBlur(e) {
    var targetID = e.target.getAttribute('id');
    var val = document.getElementById(targetID).value;
    if (val === '') {
        return;
    }
    for (var i in data.listItem) {
        if (data.listItem[i].attributeId === targetID) {
            data.listItem[i].attributeValueList.push({
                valueId: new Date().getTime(),
                valueName: val
            });
        }
    }
    document.getElementById(targetID).value = '';
    updateData(this.listItem)
}

function updateCheckbox(type, id, selected, listItem) {
    for (var i in data.listItem) {
        if (data.listItem[i].type === type) {
            if (type === 'radio') {
                for (var j in data.listItem[i].attributeValueList) {
                    console.log(data.listItem[i].attributeValueList[j].valueId == id)
                    if (data.listItem[i].attributeValueList[j].valueId == id) {
                        data.listItem[i].attributeValueList[j].check = true;
                    } else {
                        data.listItem[i].attributeValueList[j].check = false;
                    }
                }
            } else {
                for (var j in data.listItem[i].attributeValueList) {
                    if (data.listItem[i].attributeValueList[j].valueId == id) {
                        data.listItem[i].attributeValueList[j].check = selected;
                    }
                }
            }
        }
    }
    listItem = data.listItem;
    updateData(listItem);
}

function updateData(list) {
    localStorage.setItem('listItem', JSON.stringify(list));
}

function getLastData() {
    var result = localStorage.getItem('listItem');
    if (result) {
        result = JSON.parse(result)
    }
    return result
}